import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { px2dp } from 'bee/utils/px2dp';
import { colors, sizes } from 'bee/themes';
import { Icon } from 'bee/components/Icon';

// @flow
type Prop = {
  optionName: string,
  onPress: func,
  iconColor: string,
  iconName: string,
};

class OtherOption extends Component<Prop> {
  render() {
    return (
      <TouchableOpacity onPress={this.props.onPress}>
        <View style={styles.container}>
          {/* <Text style={styles.icon} /> */}
          <View style={styles.icon}>
            <Icon
              name={this.props.iconName}
              color={this.props.iconColor}
              size={sizes.f3}
            />
          </View>
          <Text style={styles.name}>{this.props.optionName}</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: px2dp(90),
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: colors.white,
    borderBottomWidth: StyleSheet.hairlineWidth,
    // borderBottomWidth: px2dp(2),
    borderColor: colors['1104'],
  },
  icon: {
    // height: px2dp(37),
    // width: px2dp(45),
    marginLeft: px2dp(30),
    marginRight: px2dp(19),
    // backgroundColor: colors['1002'],
  },
  name: {
    fontSize: sizes.f2,
    color: colors['1101'],
  },
});

export default OtherOption;
